<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-25 18:27:11
 * @LastEditTime: 2019-11-09 14:58:13
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <div class="container_card">
      <div class="container_head">
        <svg-icon icon-class="component" />  打包
      </div>
      <div class="container_body">
        <el-steps :active="active" finish-status="success">
          <el-step title="选择游戏" description="选择需要打包的游戏" />
          <el-step title="选择平台" description="确认平台" />
          <el-step title="选择项目" description="选择游戏项目版本" />
          <el-step title="选择渠道" description="选择需要打包的渠道" />
          <!-- <el-step title="配置参数" description="确定选择的渠道参数" /> -->
          <el-step title="确定任务" description="确认信息" />
          <el-step title="开始打包" description="开始打包任务" />
        </el-steps>
      </div>
    </div>
    <!--选择游戏list-->
    <div v-show="active == 0" class="container_card">
      <div class="table">
        <el-table
          ref="gameRef"
          :data="gameData"
          highlight-current-row
          border
          style="width: 90%"
          @current-change="handleCurrentChange"
        >
          <el-table-column
            prop="name"
            label="游戏名称"
          />
          <el-table-column
            prop="icon"
            label="游戏图标"
          >
            <template slot-scope="scope">
              <img :src="url+scope.row.icon" alt="" width="30">
            </template>
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间"
          />
        </el-table>
      </div>
    </div>
    <!--步骤二内容-->
    <div v-show="active == 1" class="container_card">
      <div class="cursor">
        <div :class="systemId == 1 ? 'game_li_active':''" @click="click_system(1)"><svg-icon icon-class="android" /></div>
        <div :class="systemId == 2 ? 'game_li_active':''" @click="click_system(2)"><svg-icon icon-class="IOS" /></div>
      </div>
    </div>
    <div />
    <!--步骤3-->
    <div v-show="active == 2" class="container_card">
      <div class="table">
        <el-table
          ref="gameInfoTable"
          :data="gameInfo"
          border
          :reserve-selection="true"
          :row-key="gameRowKey"
          style="width: 90%"
          @selection-change="gameInfoSelect"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="name"
            label="所属游戏"
          >
            <div>{{ gameName }}</div>
          </el-table-column>
          <!-- <el-table-column
            prop="decompile"
            label="反编译"
          /> -->
          <el-table-column
            prop="version"
            label="版本号"
          />
          <el-table-column
            prop="abstract"
            label="版本说明"
          />
          <el-table-column
            prop="system"
            label="所属平台"
          >
            <div>
              安卓
            </div>
          </el-table-column>
          <!-- <el-table-column
            prop="size"
            label="大小"
          /> -->
          <el-table-column
            prop="created_at"
            label="创建时间"
          />
        </el-table>
      </div>
    </div>
    <!--步骤4-->
    <div v-show="active == 3" class="container_card">
      <div class="table">
        <el-table
          :data="channelData"
          border
          stripe
          style="width: 90%"
          @selection-change="channelSelect"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <!-- <el-table-column
            label="同步"
            align="center"
            style="font-size: 20px"
          >
            <template slot-scope="scope">
              <svg-icon v-if="scope.row.state" icon-class="success" style="width: 30px; height: 30px" />
              <svg-icon v-else icon-class="cuowu" style="width: 28px; height: 28px" />
            </template>
          </el-table-column> -->
          <el-table-column
            prop="name"
            label="渠道名称"
          />
          <el-table-column
            prop="id"
            label="渠道代码"
          />
          <el-table-column
            prop="signType"
            label="使用签名"
          >
            <template slot-scope="scope">
              <el-select v-model="scope.row.signature_id" placeholder="请选择">
                <el-option
                  v-for="item in signData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="channel_version"
            label="使用版本"
          /> -->
          <!-- <el-table-column
            label="操作"
            prop="desc"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="addParams(scope.row.id)">参数修改</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
    <!--步骤5-->
    <div v-show="active == 4" class="container_card">
      <div class="table">
        <el-table
          :data="task_list"
          border
          stripe
          style="width: 90%"
        >
          <el-table-column
            prop="game"
            label="游戏名称"
          />
          <el-table-column
            prop="game_version"
            label="游戏版本"
          />
          <el-table-column
            prop="channel_name"
            label="渠道别名"
          />
          <el-table-column
            prop="channel_version"
            label="渠道版本"
          />
          <el-table-column
            prop="sign_name"
            label="签名名称"
          />
        </el-table>
      </div>
    </div>
    <!--步骤6-->
    <div v-show="active == 5" class="container_card">
      <div class="table">
        <el-table
          :data="taskData"
          border
          stripe
          style="width: 90%"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="所在服务器">
                  <span>{{ props.row.ip }}</span>
                </el-form-item>
                <el-form-item label="加密方式">
                  <span>{{ props.row.sign }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="ID"
          />
          <el-table-column
            prop="name"
            label="游戏名称"
          />
          <el-table-column
            prop="decompile"
            label="反编译"
          />
          <el-table-column
            prop="channelName"
            label="渠道名称"
          />
          <el-table-column
            prop="channelVersion"
            label="渠道版本"
          />
          <el-table-column
            prop="version"
            label="项目版本"
          />
          <el-table-column
            prop="date"
            label="开始时间"
          />
          <el-table-column
            prop="state"
            label="状态"
          >
            <template slot-scope="scope">
              <el-button v-if="scope.row.state == 1" size="mini" type="warning">队列中</el-button>
              <el-button v-if="scope.row.state == 2" size="mini" type="success">打包完成</el-button>
              <el-button v-if="scope.row.state == 3" size="mini" type="danger">打包失败</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="操作"
          />
        </el-table>
      </div>
    </div>
    <!--步骤按钮-->
    <div class="click_btn">
      <el-button v-if="active > 0 && active < 5" type="primary" style="margin-top: 12px;" @click="pre">上一步</el-button>
      <el-button v-if="active < 5" type="primary" style="margin-top: 12px;" @click="next">{{ nextText }}</el-button>
    </div>
    <template>
      <el-dialog
        title="配置参数"
        :visible.sync="paramsVisible"
        append-to-body
      >
        <el-form
          ref="paramsForm"
          :model="paramsForm"
          status-icon
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="编译类型"
          >
            <template>
              <div>
                <el-checkbox-group v-model="complilation" size="small" @change="comChange">
                  <el-checkbox value="0" label="编译参数" border />
                  <el-checkbox value="1" label="gameSettings" border />
                </el-checkbox-group>
              </div>
            </template>
          </el-form-item>
          <el-form-item
            v-for="item in paramsData"
            :key="item.id"
            :label="item.name"
            prop="key"
          >
            <el-input
              :ref="item.key"
              v-model="item.value"
              :placeholder="item.key"
              name="key"
            />
          </el-form-item>
          <el-form-item style="margin-top:20px">
            <el-button type="primary" @click="submitParams()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </template>
  </div>

</template>
<script>
import dataPost from '@/api/data.js'
import config from '../../config/config'
import Echo from 'laravel-echo' // laravel-echo
import io from 'socket.io-client'
export default {
  data() {
    return {
      active: 0,
      nextText: '下一步',
      url: config.BASE_IMG,
      systemId: 0,
      tableData: {},
      gameData: [],
      gameKey: '',
      gameId: 0,
      channelData: [],
      game: dataPost.game,
      gameInfo: dataPost.gameInfo,
      confirmData: dataPost.confirmData,
      taskData: dataPost.taskData,
      gameInfoArr: [],
      channelArr: [],
      signData: [],
      signId: 0,
      gameName: '',
      paramsVisible: false,
      paramsData: {},
      complilation: [],
      type: [],
      paramsForm: {},
      task_list: [],
      uid: 0
    }
  },
  watch: {
    active(val) {
      if (val === 4) {
        for (let i = 0; i < this.gameInfoArr.length; i++) {
          for (let j = 0; j < this.channelArr.length; j++) {
            this.task_list.push({
              'game': this.gameName,
              'game_version': this.gameInfoArr[i].version,
              'channel_name': this.channelArr[j].alias,
              'channel_version': this.channelArr[j].channel_version,
              'sign_name': this.channelArr[j].signId
            })
          }
        }
        this.nextText = '开始打包'
      } else {
        this.nextText = '下一步'
      }
      if (val === 5) {
        // const data = {
        //   'game_id': this.gameId,
        //   'version': this.gameInfoArr[0].version,
        //   'alias': this.channelArr[0].alias,
        //   'channel_version': this.channelArr[0].channel_version
        // }
        const data = {
          'game_id': this.gameId,
          'system': 'Android',
          'gameInfoArr': this.gameInfoArr,
          'channelArr': this.channelArr
        }
        this.$api.exec_bat(data).then(res => {
          console.log(res)
        })
      }
    }
  },
  mounted() {
    this.uid = this.$store.getters.uid
    window.io = io
    window.Echo = new Echo({
      broadcaster: 'socket.io',
      host: 'http://192.168.50.43:6001',
      auth: { headers: { 'Authorization': 'Bearer ' + localStorage.getItem('_token') }}
    })
    window.Echo.channel('tasks.' + this.uid).listen('News', (res) => {
      if (res.status === 200) {
        this.$notify({

          title: '成功',
          message: '打包成功！',
          type: 'success'
        })
        console.log(res.message)
      } else {
        console.log('something wrong!')
      }
    })
    this.$api.get_game_list([]).then(res => {
      this.gameData = res.data
    })
  },
  methods: {
    comChange(e) {
      this.type = e
      console.log(e)
    },
    handleCurrentChange(e) {
      this.gameId = e.id
      this.gameName = e.name
      console.log(e.id)
      const data = {
        id: this.gameId
      }
      this.$api.get_game_channel(data).then(res => {
        // res.data.signId = res.data.signId.toString()
        // for (let i = 0; i < res.data.length; i++) {
        //   res.data[i].signId = res.data[i].signId.toString()
        // }
        this.channelData = res.data
      })
      this.$api.get_game_version(data).then(res => {
        this.gameInfo = res.data
      })
      this.$api.get_sign_list([]).then(res => {
        this.signData = res.data
      })
    },
    addParams(id) {
      this.paramsVisible = true
      const data = {
        cid: id,
        gid: this.id
      }
      const datas = {
        id: id
      }
      this.$api.get_channel(datas).then(res => {
        this.paramsForm.data = res.data
      })
      this.$api.get_params_value(data).then(res => {
        this.paramsData = res.data
      })
    },
    channelSelect(e) {
      this.channelArr = e
      const data = {
        data: e
      }
      console.log(e)
      // if (e.length > 0) {
      //   this.$api.update_compile(data).then(res => {
      //     console.log(res)
      //   })
      // }
    },
    // 选择平台
    click_system(id) {
      this.systemId = id
    },
    gameRowKey(row) {
      return row.id
    },
    pre() {
      if (this.active > 0) {
        this.active--
      }
    },
    next() {
      if (this.nextVerify()) {
        if (this.active < 5) {
          this.active++
        }
      }
    },
    // 选择游戏版本
    gameInfoSelect(e) {
      this.gameInfoArr = e
    },
    // 验证next
    nextVerify() {
      if (this.active === 0 && this.gameId === 0) {
        this.$message('请选择游戏！')
        // this.$alert('请选择一个游戏');
        return false
      }
      if (this.active === 1 && this.systemId === 0) {
        // this.$alert('请选择一个操作系统！');
        this.$message('请选择一个操作系统！')
        return false
      }
      if (this.active === 2 && this.gameInfoArr.length === 0) {
        this.$message('请选择游戏项目版本！')
        return false
      }
      if (this.channelArr.length === 0 && this.active === 3) {
        this.$message('请选择游戏渠道！')
        return false
      }
      return true
    },
    // 这是默认选中
    selectChecked(e) {
      const idArr = []
      for (let j = 0; j < e.length; j++) {
        idArr.push(e[j].id)
      }
      for (let i = 0; i < this.gameInfo.length; i++) {
        if (idArr.indexOf(this.gameInfo[i].id) > -1) {
          this.$refs.gameInfoTable.toggleRowSelection(this.gameInfo[i], true)
        }
      }
      // return idArr;
    }
  }
}
</script>
<style scoped>
  .game_ul{
    width: 90%;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .game_li{
    width: 20%;
    margin: 10px 2.5%;
    border: 1px solid #ebeef5;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 10px;
    padding: 20px 0;
  }
  .game_li img{
    width: 50%;
  }
  .game_li p{
    width: 100%;
    text-align: center;
  }
  .game_li:hover{
    border: 1px solid #ebeef5;
  }
  .game_li_active{
    border: none;
    background-color: #ebeef5;
  }
  .click_btn{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cursor{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
  }
  .cursor div{
    padding: 30px 0;
    width: 30%;
    text-align: center;
    font-size: 200px;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    margin: 0 30px;
    color: #495060;
  }
  .cursor div:hover{
    border: 1px solid #ebeef5;
  }
  .table{
    width: 90%;
    margin: 30px auto;
    display: flex;
    justify-content: center;
  }
</style>
